<template>
<div style="margin-top:370px;">
  <!-- <TypeNav></TypeNav> -->
  <div class="navMenu">
    <div class="left_nav_list">
      <div class="head_title" >极目搜索</div>
      <ul class="cont_nav_list">
        <li>
          <p style="padding:20px 0px;text-align:center;font-size:16px;font-weight:700;">国防</p>
        </li>
        <li>
          <p style="padding:20px 0px;text-align:center;font-size:16px;font-weight:700;">军事</p>
        </li>
        <li>
          <p style="padding:20px 0px;text-align:center;font-size:16px;font-weight:700;">科技</p>
        </li>
        <li>
          <p style="padding:20px 0px;text-align:center;font-size:16px;font-weight:700;">科技</p>
        </li>
        <li>
          <p style="padding:20px 0px;text-align:center;font-size:16px;font-weight:700;">科技</p>
        </li>
      </ul>
  </div>
   
    <div class="carouselClas"  >
      <Carousel style="width:40rem;height:20rem;" :bannerList="bannerList"></Carousel>
    </div>
<div class="right_nav_list">
      
     
  </div>
  <div class="tpeclass">
      <div class="bottom_nav_list">
              1111111111111111111111111111
              <img src="https://gimg2.baidu.com/image_search/src=http%3A%2…sec=1665308131&t=d4ffac9fa96ebf3be4c57d947628de21" alt="">
      </div>

  </div>


</div>
      
  
  
  
  
  
 
  

</div>
</template>

<script>

import {mapState} from 'vuex'






export default {
  name: 'home',
  components:{
   
    
    
   
 
 
   
  },
  mounted(){
    this.$store.dispatch("getBannerList");
    
  },
  data(){
    return{
        activeName: 'second'

    }
  },
  methods:{
     
  },
  computed:{
     ...mapState({
      bannerList: (state) => state.home.bannerList,
    }),
  }
  
}
</script>

<style scoped lang="less">

  .navMenu{
    
    display: flex;
    justify-content: center;
    .tpeclass{
      position:relative;
      .bottom_nav_list{
        position: absolute;
    top: 25rem;
    left: -15vw;
    height:30rem;
    width: 15vw;
    background-color: #ffffff;
    box-shadow: 5px 16px 20px 2px rgb(231 232 234 / 46%);
    border-radius: 8px;
    
      }
    }
  }
 .left_nav_list{
  margin-right:20px;
      float: left;
    width: 15vw;
    height:100%;
    background-color: #ffffff;
    box-shadow: 5px 16px 20px 2px rgb(231 232 234 / 46%);
    border-radius: 8px;
    .head_title{
        padding: 20px 0px;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
    font-size:16px;
    font-weight: 700;
    }
    
 }
 /deep/.el-tabs__nav{
    width:40vw;
 }
 .right_nav_list{
  margin-left:30px;
      float: left;
    width: 15vw;
    height: 20rem;
    background-color: #ffffff;
    box-shadow: 5px 16px 20px 2px rgb(231 232 234 / 46%);
    border-radius: 8px;
    
    
 }
  .carouselClas{
    background-color: #ffffff;
    box-shadow: 5px 16px 20px 2px rgb(231 232 234 / 46%);
    width:44rem;
    height:200rem;
  }


    
</style>
